CSS基礎介紹(1)

13th鐵人賽 css教學 html教學前端網頁

JackyHuang

2021-09-05 23:55:36

1040 瀏覽

分享至

來輕鬆聊聊

學會如何利用HTML編輯網頁架構後，再來要進入讓網頁美化的CSS了。還不知道什麼是HTML的人，沒關係，只要花兩天就可以學到基礎概念囉! 學HTML看這邊!!
CSS的內容就比較多了，將會用較多篇幅來做分享哦，那就開始吧!

CSS的三種寫法

在對HTML文件編輯CSS效果時，從三種方法中擇一使用:
- 第一種是前篇文章中所提到，將CSS寫在<head>的<style>中。
- 第二種是寫在一個.css結尾的檔案，再將其嵌入HTML中。
- 第三種是直接將CSS樣式寫在<body>內的標籤中，請看範例。
- 不論何種寫法，每一個CSS屬性值後面都必須加上分號;，代表結束。
若不是直接將style屬性寫在HTML標籤內部，是如何讓瀏覽器偵測該效果是要讓什麼部分做出改變呢?
這時候就要使用CSS選擇器來將HTML文件的標籤(或是id、class等)寫明白，並在後方的大括號內放入你的CSS屬性。在範例中，h2就是一個CSS選擇器。

範例

<style>
    h2 {
        color:blue;
        font-style:italic;
    }
</style>
<h2 style="color: blue; font-style:italic;">大家好</h2>

顯示效果如下

CSS選擇器

若不是直接將style屬性寫在HTML標籤內部，是如何讓瀏覽器偵測該效果是要讓什麼部分做出改變呢?
這時候就要使用CSS選擇器來將HTML文件的標籤(或是id、class等)寫明白，並在後方的大括號內放入你的CSS屬性。在範例中，h1就是一個CSS選擇器。
若使用id屬性(id為唯一值)的選擇器，要在其值的前方加上#，而class屬性(多個標籤可以擁有一樣的class)則是在前方加上.。
可以看到在範例中，雖然不同的選擇器各自設定不同的字體顏色，但是顯示出來的結果是id屬性的值，說明了選擇器是有先後順序的。依據排序為:id>class>標籤(h1)，大家也可以試試看把部分註解(ctrl+/)或刪除，看看效果如何。

範例

<style>
    h1 {
        color:gray;
    }
    #page-title {
        color:blue;
    }
    .title {
        color:red;
    }
</style>
<h1 id="page-title" class="title">Jacky's Home</h1>

顯示效果如下

字體效果

要讓字體產生變化，有許多不同的屬性可以使用，以下分享幾種常見的項目:
- color屬性用來設定字體的顏色，表示方式有三種:
  - 直接寫顏色，例:color: red;。
  - 16進位表示法，以一個#加上6個16進位數字，例:color:#FFFFFF;(白色)、color:#000000;(黑色)。
  - rgba表示法，rgba分別為Red(紅)、Green(綠)、Blue(藍)，值為0~225任一數字或以百分比表示；a代表透明程度，值為0~1之間包含小數，例:rgba(20, 20, 30, 1)、rgba(35%, 25%, 46%, 0.6)。
- font-size用來改變字體的大小，常用的單位有:px(pixel點像素)、em(前方數字X父元素的字體大小)、rem(前方數字X16px)。
- font-family指的是字體的字型為何，有許多內建可用的字型，也可以在網路上找到許多支援各種瀏覽器的字型，以<link>嵌入。
- font-style常用來使字體傾斜，例:font-style:italic;。
- font-weight用來設定字體的粗細程度，為100~900任一數字或一個形容詞(bold、lighter等)。

範例

<!-- HTML -->
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css" />
<h1>Taiwan</h1>
<!-- CSS -->
h1 {
  color:rgba(20, 20, 30, 0.7);
  font-size:3rem;
  font-family:Lobster;
  font-weight:150;
}

顯示效果如下

圖片大小及邊框

調整圖片的長寬有許多種方法，只要調整其width(寬度)、height(高度)的值，值的單位與字體大小所使用的相同。
border為邊框屬性，其值可以空格填入寬度、顏色與樣式，也可以分別以border-width、border-color、border-style做設定。
border-radius用來調整邊框的圓角程度，其值與字體大小單位相同，若想製造類似於FB的圓形大頭貼效果，可以將值設定為50%。
邊框四個邊可以單獨設定，border-top、border-bottom、border-left、border-right。

範例

<!-- HTML -->
<img src="https://upload.wikimedia.org/wikipedia/zh/thumb/1/14/Taipei_2017_Summer_Universiade_Official_Mascot-%E7%86%8A%E8%AE%9ABravo.svg/800px-Taipei_2017_Summer_Universiade_Official_Mascot-%E7%86%8A%E8%AE%9ABravo.svg.png">
<!-- CSS -->
img {
  width:30%;
  border:3px solid green;
  border-radius:50%;
}